3
3
.
.
4
4
.
.
1
1
C
C
u
u
s
s
t
t
o
o
m
m
V
V
i
i
e
e
w
w
-
-
C
C
r
r
e
e
a
a
t
t
e
e
I
I
n
n
f
f
o
o
[
[
R
R
]
]
This tutorial shows how to create Custom View.
In chapter Visible Views we have seen how to use built-in views that display certain specific item like Image or Text.
This tutorial shows how to create Custom View that combines multiple built-in views.
For instance multiple Text Views and an Image View to hold information about the User and his picture.
To use such View we just feed it with the text and Image and it will automatically arrange them as previously defined.
Content
Name
Image
Name & Image
N
N
a
a
m
m
e
e
[
[
R
R
]
]
Example
struct ContentView: View {
var body: some View {
HStack {
VStack(alignment: .leading) {
Text("First Name:").bold().padding(.bottom)
Text("Last Name:").bold()
}
VStack(alignment: .leading) {
Text("John").padding(.bottom)
Text("Carpenter")
}
}.frame(maxWidth: .infinity, alignment: .topLeading).padding()
}
}
Output
N
N
a
a
m
m
e
e
&
&
I
I
m
m
a
a
g
g
e
e
[
[
R
R
]
]
Example
struct ContentView: View {
var body: some View {
VStack {
HStack {
VStack(alignment: .leading) {
Text("First Name:").bold().padding(.bottom)
Text("Last Name:").bold()
}
VStack(alignment: .leading) {
Text("John").padding(.bottom)
Text("Carpenter")
}
}.frame(maxWidth: .infinity, alignment: .topLeading).padding()
Image("Person")
.resizable()
.aspectRatio(contentMode: .fit)
.border(Color.gray, width: 2)
.padding(.leading)
.padding(.trailing)
.frame(maxWidth: .infinity, alignment: .topLeading)
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
}
}
Output
